<template>
  <div class="g-provinceList">
      <h2 class="u-title">{{title}}</h2>
      <ul class="labeltitle">
          <li class="wa1 wasx u-l1">地区</li>
          <li class="wa2 u-l2">确诊</li>
          <li class="wa3 u-l4">治愈</li>
          <li class="wa4 u-l5">死亡</li>
          <li class="wa5 u-l6">病死率</li>
      </ul>
      <ul class="cntSection">
          <li v-for="p in data">
              <div class="total">
                  <p class="wa1 nonefolder name">{{p.name || '-'}}</p>
                  <p class="wa2">{{p.confirm || '-'}}</p>
                  <p class="wa3">{{p.heal || '-'}}</p>
                  <p class="wa4">{{p.dead || '-'}}</p>
                  <p class="wa5 p-15">{{(((p.dead/p.confirm)*100).toFixed(2) || '-')+'%'}}</p>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>

export default {
    props:['data','title']
}
</script>

<style>
.g-provinceList { font-size: 14px;}
    .g-provinceList .labeltitle {display: flex;justify-content: space-around;align-items: center;}
    .g-provinceList .labeltitle li { text-align: center;height: 42px; line-height: 42px;color: rgba(76, 96, 114, 1);}
    /* .g-provinceList .cntSection {} */
    .g-provinceList .cntSection li { border-bottom: 1px solid #F2F2F2; height: 42px;;}
    .g-provinceList .cntSection li .total {display: flex;justify-content: space-around;align-items: center;}
    .g-provinceList .cntSection li .total > p {display: flex;align-items: center;justify-content: center;flex-grow: 0; flex-shrink: 0; height: 42px; line-height: 16px;padding: 1px; box-sizing: border-box;}
    .g-provinceList .cntSection li .total p.name,
    .g-provinceList .labeltitle li.wa1x {justify-content: flex-start; padding-left: 20px; text-align: left}

    .g-provinceList .wa1,
    .g-provinceList .wa1x { width: 28%}

    .g-provinceList .wa2 { width: 18%;}
    .g-provinceList .wa3 { width: 18%;}
    .g-provinceList .wa4 { width: 18%;}
    .g-provinceList .wa5 { width: 18%;}
    .g-provinceList .u-l1 { background-color: #ecf1fd;}
    .g-provinceList .u-l2 { background-color: #fff0ee;}
    .g-provinceList .u-l3 { background-color: #fff8ed;}
    .g-provinceList .u-l4 { background-color: #f7f9eb;}
    .g-provinceList .u-l5 { background-color: #E7EDF8;}
    .g-provinceList .u-l6 { background-color: #e7bbae;}
    h2.u-title {
        display: flex;align-items: center;
        font-size: 16px; margin: 0;padding: 15px;color: rgba(21, 77, 194, 1);}
    h2.u-title:before { content: ' '; display: block; width: 10px;height: 10px;margin-right: 10px;background: linear-gradient(180deg, rgba(34, 114, 220, 1) 0%, rgba(15, 62, 183, 1) 100%);}
</style>